<template>
	<view class="pt140 ">
		<view class="cen cf fz30 ">
			{{title}}
		</view>
		<view class="mt60 cen">
			<view class="kknnertyu" v-for="(sd,idx) in xdddfrfr" :class="idx<inns?'act':''"></view>
		</view>
		<input class="fgdfyswert" type="number" value="" focus placeholder="" v-model="jjnnsd" @input="kjnsety" maxlength="4"/>
	</view>
</template>
<script>
	export default {
		props:['title'],
		data() {
			return {
				xdddfrfr:4,
				inns: 0,
				jjnnsd:''
			}
		},
		components: {
			
		},
		methods: {
			kjnsety(e){
				this.inns = e.detail.value.length
				console.log("输入的长度",e.detail.value)
				if (e.detail.value.length>=4) {
					this.$emit('huitiao',e.detail.value)
					this.jjnnsd = ''
					this.inns=0;
				}
			}
		},
		mounted() {
			
		}
	}
</script>
<style scoped>
	.kknnertyu{
		border: 4upx solid #fff;
		border-radius: 50%;
		width: 24upx;
		height: 24upx;
		display: inline-block;
		margin-left: 20upx;
		margin-right: 20upx;
	}
	.kknnertyu.act{
		background-color: #fff;
	}
	.fgdfyswert{
		opacity: 0.1;
	}
</style>
